<template>
	<div>
		<canvas width="200" height="200" id="canvas"  ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { resource, Game ,Scene ,GameObject , RESOURCE_TYPE, LOAD_EVENT } from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { Img, ImgSystem } from '@eva/plugin-renderer-img';
	export default{
		name: 'EvajsStudyShowImage',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.loadResource()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			loadResource(){
				resource.addResource([
					{
						name: 'img',
						type: RESOURCE_TYPE.IMAGE,
						src: {
							image: {
								type: 'png',
								url: '/images/TB1DNzoOvb2gK0jSZK9XXaEgFXa-658-1152.webp',
							},
						},
						preload: true,
					}
				]);
				resource.preload();
				// 开始loader
				resource.on(LOAD_EVENT.START, e => {
					console.log('开始加载', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.PROGRESS, e => {
					console.log('进度监听', e);
				}); 
				// 某文件加载成功
				resource.on(LOAD_EVENT.LOADED, e => {
					console.log('某文件加载成功', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.COMPLETE, e => {
					console.log('完成', e);
					this.showImage()
				}); 
				// 加载错误
				resource.on(LOAD_EVENT.ERROR, e => {
					console.log('错误', e);
				}); 
			},
			showImage(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 750,
							height: 1000,
						}),
						// 游戏图片系统
						new ImgSystem(),
					],
				});
				// 游戏对象
				const image = new GameObject('image', {
					size: { width: 750, height: 1309},
					origin: { x: 0, y: 0 },
					position: {
						x: 0,
						y: -319,
					},
					anchor: {
						x: 0,
						y: 0,
					},
				});
				// 游戏对象内添加图片资源
				image.addComponent(
					new Img({
						resource: 'img',
					}),
				);
				// 游戏场景内放置游戏对象
				this.game.scene.addChild(image);
			}
		}
	}
</script>